﻿<UserControl x:Class="Bewise.Phone.Tile" x:Name="theTile"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Height="346" Width="173" Background="{StaticResource PhoneAccentBrush}" Foreground="White"
    d:DesignHeight="173" d:DesignWidth="173">
    <UserControl.Resources>
        <Storyboard x:Name="TileAnim">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" Storyboard.TargetName="AnimatedFrontGrid">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-173"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-84">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <QuarticEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:4.8" Value="-84"/>
                <EasingDoubleKeyFrame KeyTime="0:0:5.6" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <QuarticEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:9.6" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:10.4" Value="-173">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <QuarticEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="FlipAnim">
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="FrontGrid">
        		<EasingDoubleKeyFrame KeyTime="0:0:4.0" Value="1"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:4.1" Value="0"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:12.1" Value="0"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:12.2" Value="1"/>
        	</DoubleAnimationUsingKeyFrames>
        	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FrontGrid">
        		<DiscreteObjectKeyFrame KeyTime="0:0:4.1">
        			<DiscreteObjectKeyFrame.Value>
        				<Visibility>Collapsed</Visibility>
        			</DiscreteObjectKeyFrame.Value>
        		</DiscreteObjectKeyFrame>
        		<DiscreteObjectKeyFrame KeyTime="0:0:12.1">
        			<DiscreteObjectKeyFrame.Value>
        				<Visibility>Visible</Visibility>
        			</DiscreteObjectKeyFrame.Value>
        		</DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="BackGrid">
                <EasingDoubleKeyFrame KeyTime="0:0:4.1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4.2" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:12" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:12.1" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BackGrid">
        		<DiscreteObjectKeyFrame KeyTime="0:0:4.1">
        			<DiscreteObjectKeyFrame.Value>
        				<Visibility>Visible</Visibility>
        			</DiscreteObjectKeyFrame.Value>
        		</DiscreteObjectKeyFrame>
        		<DiscreteObjectKeyFrame KeyTime="0:0:12.1">
        			<DiscreteObjectKeyFrame.Value>
        				<Visibility>Collapsed</Visibility>
        			</DiscreteObjectKeyFrame.Value>
        		</DiscreteObjectKeyFrame>
        	</ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid>
        <Grid x:Name="FrontGrid" RenderTransformOrigin="0.5,0.25">
        	<Grid.RenderTransform>
        		<CompositeTransform ScaleY="1"/>
        	</Grid.RenderTransform>
            <Grid x:Name="AnimatedFrontGrid" Height="346" Width="173" Background="{Binding ElementName=theTile, Path=Background}" RenderTransformOrigin="0.5,0.5">
                <Grid.RenderTransform>
                    <TranslateTransform Y="-173" />
                </Grid.RenderTransform>
                <Grid.RowDefinitions>
                    <RowDefinition Height="87"></RowDefinition>
                    <RowDefinition Height="86"></RowDefinition>
                    <RowDefinition Height="173"></RowDefinition>
                </Grid.RowDefinitions>

                <TextBlock x:Name="tileText" Foreground="{Binding ElementName=theTile, Path=Foreground}" Grid.Row="1" VerticalAlignment="Bottom" TextWrapping="Wrap" Text="{Binding Text}"
                   Margin="10,0,0,5" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="Segoe WP"></TextBlock>

                <Image Grid.Row="2" Width="173" Height="173" Stretch="UniformToFill" Source="{Binding ImageSource}"></Image>
            </Grid>
        </Grid>

        <Grid x:Name="BackGrid" Height="173" Width="173" Background="{Binding ElementName=theTile, Path=Background}" Visibility="Collapsed" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Top">
            <Grid.RenderTransform>
            	<CompositeTransform ScaleY="0"/>
            </Grid.RenderTransform>
            <TextBlock Foreground="{Binding ElementName=theTile, Path=Foreground}" VerticalAlignment="Top" TextWrapping="Wrap" Margin="10" FontFamily="Segoe WP"
                       Text="{Binding Description}" FontSize="{StaticResource PhoneFontSizeSmall}"></TextBlock>
        </Grid>
    </Grid>
    
</UserControl>
